<template>
  <scroll-view scroll-y="true" class="scroll">
    <view class="title">已为您匹配到{{ teamTagsList.length }}支队伍</view>
    <EmptyBox v-if="!teamTagsList.length" />
    <view class="teamList">
      <view class="left-list list">
        <TeamItem
          v-for="(item, index) in leftList"
          :key="index"
          :teamDetail="item"
        />
      </view>
      <view class="right-list list">
        <TeamItem
          v-for="(item, index) in rightList"
          :key="index"
          :teamDetail="item"
        />
      </view>
    </view>
  </scroll-view>
</template>

<script>
import { mapState } from "vuex";
import TeamItem from "../../../components/team/TeamItem";
export default {
  name: "TeamList",
  components: {
    TeamItem,
  },
  data() {
    return {};
  },

  computed: {
    ...mapState("m_team", ["teamTagsList"]),
    ...mapState(["userInfo"]),
    rightList() {
      return this.teamTagsList.filter((item, index) => (index + 1) % 2 === 0);
    },
    leftList() {
      return this.teamTagsList.filter((item, index) => (index + 1) % 2 !== 0);
    },
  },
  methods: {
    // 获取队伍数据
    async getTeamTagsListData() {
      this.$store.dispatch("m_team/getTeamListByTags", {
        tags: this.userInfo.tags,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.scroll {
  height: calc(100vh - 100rpx);
}
.title {
  text-align: center;
  font-size: 26rpx;
  color: #aaa;
  margin: 30rpx 0;
}

.teamList {
  display: flex;
  justify-content: space-around;
  .list {
    width: 49vw;
  }
}
</style>
